<template>
    <view 
        :style="[{'border-color':`${inputFocused?themeStyles.lightMainColor:''}`},{'bottom':`${keyboardHeight*2}rpx`}]"
        class="zz-keyboardInput_202008131000 zz-input-area zz-input-area_size zz-input-area_style"
        :class="{'zz-input-area_fixed':inputFocused}">
        <input 
            v-model="fillMoneyNum"
            class="input" 
            :type="type" 
            :placeholder="placeholder"
            :maxlength="maxLength"
            @focus="keyboardFocus"
            @blur="keyboardBlur"
            @input="insertFillMoneyNum">
        <!-- 清空输入 -->
        <view 
            v-show="fillMoneyNum"
            class="clearInsert" 
            @tap="clearInsert">
            <text 
                :style="themeStyles.textMainColor"
                class="template__icon template_icon-colse"></text>
        </view>
    </view>
</template>
<script>
export default {
    props:{
        type:{ // 输入框类型
            type:String,
            default:"text"
        },
        placeholder:{
            type:String,
            default:"请输入"
        },
        maxLength:{
            type:Number,
            default:140
        }
    },
    data(){
        return {
            inputFocused:false, //是否获取焦点
            keyboardHeight:0, //键盘高度
            fillMoneyNum:""  //输入的值
        };
    },
    methods:{
        //  键盘出现
        keyboardFocus(e){
            //
            let {
                height
            } = e.detail;
            this.inputFocused = true;
            console.log(e.detail);
            this.keyboardHeight = e.detail.height;
        },
        //  键盘收起
        keyboardBlur(){
            //
            this.inputFocused = false;
            this.keyboardHeight = 0;
        },
        //  传出输入框的值
        insertFillMoneyNum(){
            //
            this.$emit("user-input", this.fillMoneyNum);
        },
        //  传出输入框的值
        clearInsert(){
            //
            this.fillMoneyNum = "";
            //
            this.$emit("user-input", this.fillMoneyNum);
        }
    }
}
</script>
<style lang="scss">
.zz-keyboardInput_202008131000 {
    .clearInsert {
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        right:10rpx;
    }
}
</style>